<template>
  <div class="plan-progress full-height bg-white page-content" style="padding-top: 0; border-radius: 6px">
    <!-- 搜索区 -->
    <collapse ref="collapse">
      <template v-slot:content>
        <div class="form-inline bottom" style="justify-content: space-between; padding: 6px 0 0;">
          <div class="left box" style="display: flex">
            <div class="row">
              <select-tree label="所在位置" :sel-tree="queryParams.location" class="margin-r-20"
                           ref="selectTree"
                           :tree-list="locationOptions" node-key="hash" @treeChange="_changeTreeNode"/>
              <select-tooltip
                v-model="queryParams.workCenterName"
                isShowAll
                :options="stationOptions"
                msg="工位"
              ></select-tooltip>
              <select-tooltip
                v-model="queryParams.deviceType"
                isShowAll
                :multiple="false"
                :options="deviceTypeOptions"
                msg="设备类型"
              ></select-tooltip>
            </div>
          </div>
          <div style="display: flex">
            <q-btn
              class="btn margin-r-10"
              outline
              color="primary"
              @click="resetSearch"
              label="重置"
            />
            <q-btn class="btn" unelevated type="submit" color="primary" label="查询" @click="searchList"/>
          </div>
        </div>
        <div class="form-inline bottom" style="justify-content: space-between;padding: 0 0 20px;">
          <div class="left box">
            <q-btn-dropdown
              class="btn margin-r-10" style="padding-left: 5px" outline color="primary" label="批量绑定" :disable="selected.length == 0">
              <q-list>
                <q-item
                  v-has="{id: Enums.SYS_PERMISSION.OPERATOR_BINDING_BTN.value}"
                  v-stat="{id:CommonConfig.statData.manMachineBind.batchBindOperater.id,name:CommonConfig.statData.manMachineBind.batchBindOperater.name}"
                  clickable v-close-popup @click="batchBinding('operator')">
                  <q-item-section>
                    <q-item-label>操作员</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item
                  v-has="{id: Enums.SYS_PERMISSION.TECHNICIAN_BINDING_BTN.value}"
                  v-stat="{id:CommonConfig.statData.manMachineBind.batchBindTechnician.id,name:CommonConfig.statData.manMachineBind.batchBindTechnician.name}"
                  clickable v-close-popup @click="batchBinding('technician')">
                  <q-item-section>
                    <q-item-label>技术员</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn-dropdown class="btn margin-r-10" style="padding-left: 5px" outline color="primary" label="批量解绑" :disable="selected.length == 0">
              <q-list>
                <q-item
                  clickable v-close-popup @click="batchUntying('operator')">
                  <q-item-section>
                    <q-item-label>操作员</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item
                  clickable v-close-popup @click="batchUntying('technician')">
                  <q-item-section>
                    <q-item-label>技术员</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn
              class="btn margin-r-10" outline color="primary"
              v-stat="{id:CommonConfig.statData.manMachineBind.bindHistory.id,name:CommonConfig.statData.manMachineBind.bindHistory.name}"
              @click="bindingHistory" :disable="selected.length != 1">绑定历史</q-btn>
            <q-btn class="btn margin-r-10" outline color="primary" label="自动轮班" @click="setAutoShift" v-show="false"/>
            <q-btn
              class="btn margin-r-10" outline color="primary"
              :disable="!selected.length">刷卡绑定
              <q-popup-edit v-model="icCode"  @save="onPayBind" @cancel="onCancelPay">
                <q-input v-model="icCode" dense autofocus counter/>
              </q-popup-edit>
            </q-btn>
          </div>
          <div class="right box">
            <select-input ref="selectInput" :list="searchCondition" @search="inputSearch" @clearSearchVal="clearSearchVal"/>
          </div>
        </div>
      </template>
    </collapse>
    <!-- 搜索区End -->
    <!-- 列表数据 -->
    <tabs :tabList="tabList" v-model="selTab" showRadio @addTab="showShchemeDialog" @deleteTab="deleteScheme" @changeMarkerTab="changeMarkerTab" v-show="false"/>

    <!--  当前没有方案时显示-->
    <div class="no-workshop" v-if="showAddBtn">
      <div class="add-btn cursor-pointer flex justify-center items-center" @click="showShchemeDialog">
        <div>
          <q-icon name="iconfont icontubiao-39" size="48px"/>
          <div class="margin-t-10">添加方案</div>
        </div>
      </div>
    </div>
    <q-table v-else
             :loading="loading"
             class="myTable scroll my-sticky-virt scroll-table bor scroll-bor"
             :columns="tableColumns"
             :data="tableData"
             row-key="deviceId"
             no-data-label="暂无数据"
             selection="multiple"
             :selected.sync="selected"
             :pagination.sync="pagination"
             color="primary"
             hide-bottom
             style="margin-right: 0;margin-left: 0;height: 100%"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th
            title="Treats"
            key="name"
            class="bor-b"
            :colspan="props.cols.length"
          >
            {{selWorkShop}}
          </q-th>
        </q-tr>
        <q-tr :props="props">
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            class="bor-b"
          >
            <q-checkbox v-model="props.selected" :disable="voidList === tableData.length" indeterminate-value="some" v-if="col.name == 'deviceName'" @input="selAll" />
            {{col.label}}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td :props="props" class="bor-b font-size-14 " key="deviceName">
            <q-checkbox v-model="props.selected" :disable="props.row.deviceType === 'void'" />
<!--                  <div style="width: 40px;display: inline-block" v-if="props.row.deviceType === 'void'"></div>-->
            {{ props.row.deviceName}}({{props.row.assetNumber}})
          </q-td>
          <q-td :props="props" class="bor-b font-size-14 " key="workCenterName">
            {{ props.row.workCenterName}}
          </q-td>
          <q-td :props="props" class="bor-b font-size-14" style="padding: 0" v-for="(item) in props.cols[props.cols.length - 1].shiftsList" :key="'turn_'+item.id">
            <div class="item justify-between items-center td-item td-item-min" v-if="JSON.stringify(props.row['turn_'+item.id].operator) !== '{}'">
              <div style="line-height: 1">操作员：{{props.row['turn_'+item.id].operator.name}}</div>
              <q-btn
                v-has="{id: Enums.SYS_PERMISSION.OPERATOR_BINDING_BTN.value}"
                v-stat="{id:CommonConfig.statData.manMachineBind.unbind.id,name:CommonConfig.statData.manMachineBind.unbind.name}"
                flat
                style="padding: 0; min-height: 20px"
                class="unbind"
                :class="{'disable-btn': props.row.deviceType === 'void'}"
                @click="singleBinding('operator', props.row, props.row['turn_'+item.id].operator.id, item.id, true)">替换</q-btn>
            </div>
            <div class="item justify-between items-center td-item td-item-min" v-else>
              <div style="line-height: 1">操作员：无</div>
              <q-btn
                v-has="{id: Enums.SYS_PERMISSION.OPERATOR_BINDING_BTN.value}"
                v-stat="{id:CommonConfig.statData.manMachineBind.bind.id,name:CommonConfig.statData.manMachineBind.bind.name}"
                flat
                style="padding: 0; min-height: 20px"
                class="bind"
                :class="{'disable-btn': props.row.deviceType === 'void'}"
                @click="singleBinding('operator', props.row, props.row['turn_'+item.id].operator.id, item.id)">绑定</q-btn>
            </div>
            <div class="item justify-between items-center td-item td-item-min" v-if="JSON.stringify(props.row['turn_'+item.id].technician) !== '{}'">
              <div  style="line-height: 1">技术员：{{props.row['turn_'+item.id].technician.name}}</div>
              <q-btn
                v-has="{id: Enums.SYS_PERMISSION.TECHNICIAN_BINDING_BTN.value}"
                v-stat="{id:CommonConfig.statData.manMachineBind.unbind.id,name:CommonConfig.statData.manMachineBind.unbind.name}"
                flat
                style="padding: 0; min-height: 20px"
                class="unbind"
                :class="{'disable-btn': props.row.deviceType === 'void'}"
                @click="singleBinding('technician', props.row, props.row['turn_'+item.id].technician.id, item.id, true)">替换</q-btn>
            </div>
            <div class="item justify-between items-center td-item td-item-min" v-else>
              <div  style="line-height: 1">技术员：无</div>
              <q-btn
                v-has="{id: Enums.SYS_PERMISSION.TECHNICIAN_BINDING_BTN.value}"
                v-stat="{id:CommonConfig.statData.manMachineBind.bind.id,name:CommonConfig.statData.manMachineBind.bind.name}"
                flat
                style="padding: 0; min-height: 20px"
                class="bind"
                :class="{'disable-btn': props.row.deviceType === 'void'}"
                @click="singleBinding('technician', props.row, props.row['turn_'+item.id].technician.id, item.id)">绑定</q-btn>
            </div>
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <!-- 批量绑定弹出框 -->
    <batch-bundling
      ref="batchBundling"
      :batchBund="batchBund.selected"
      :type="batchBund.type"
      :show="batchBund.show"
      :list="departments"
      :shiftsList="shiftsList"
      :postOptions="postOptions"
      :workshopId="workshop"
      @close="batchBund.show = false"
      @getBindingList="getBindingList"
    />
    <!-- 批量绑定弹出框End -->
    <!-- 单人绑定 -->
    <bund-dialog
      :type="bund.type"
      :show="bund.show"
      :shiftId="bund.shiftId"
      :userId="bund.userId"
      :workshopId="workshop"
      :deviceId="bund.deviceId"
      :deviceName="bund.deviceName"
      :shiftName="bund.shiftName"
      :postOptions="postOptions"
      :list="departments"
      ref="bundDialog"
      @close="bund.show = false"
      @getBindingList="getBindingList"
    />
    <!-- 批量解绑弹出框 -->
    <batch-unbundling
      ref="batchUnbundling"
      :batchUnbund="batchUnbund.selected"
      :type="batchUnbund.type"
      :show="batchUnbund.show"
      :shiftsList="shiftsList"
      @close="batchUnbund.show = false"
      @getBindingList="getBindingList"
    />
    <!-- 批量解绑弹出框End -->
    <!-- 绑定记录弹框 -->
    <bund-history
      :show="history.show"
      :selected="history.selected"
      :deviceDetail="deviceDetail"
      :shiftsList="shiftsList"
      @close="history.show = false"
    />
    <pay-dialog :show="isShowPayDialog" @close="onCancelPay" ref="payDialog" :shiftsList="shiftsList"/>
    <set-auto-shift ref="setAutoShift"/>
    <basic-dialog
      :visible="shchemeDialog"
      minWidth="300px"
      isShowBasicFooter
      :loading="isSubmitloading"
      @close="shchemeDialog = false"
      @submit="addScheme"
      title="添加方案"
      :isFullScreen="false"
      :hasFooterMargin="false"
    >
      <div class="form-inline" style="padding-top: 20px; padding-bottom: 0;display: block">
        <yz-input inputType="input"
                  placeholder="请输入方案名称"
                  title="方案名称"
                  isRule
                  :maxlength="6"
                  :rules="[0]"
                  class="input-width"
                  v-model="schemeName"/>
      </div>
    </basic-dialog>
  </div>
</template>

<script>
import Collapse from 'src/components/collapse'
import SelectInput from '../../components/select-input/index'
import batchBundling from './components/batch-bundling'
import batchUnbundling from './components/batch-unbundling'
import setAutoShift from './components/man-machine-bind/set-auto-shift'
import bundDialog from './components/bund-dialog'
import bundHistory from './components/bund-history'
import {
  getDeviceTypes,
  getShiftsList,
  getBindingList
} from '../../boot/job/man-machine-bind'
import userManageApi from '../../boot/system/user-manage'
import { getDict } from '../../boot/common/dict'
import refreshMixin from '../../assets/js/refresh-mixin'
import payDialog from './components/man-machine-bind/pay-dialog'
import tabs from 'src/components/tab'
import SelectTree from 'src/components/select-tree'
import { getOrganize } from '../../boot/status-monitor/machine'
import { defaultSchemesClearer } from '../../assets/js/util'
import { getStation } from '../../boot/tpm/equipment-record'

export default {
  name: 'man-machine-bind',
  mixins: [refreshMixin],
  components: {
    SelectInput,
    Collapse,
    // Pagination,
    batchBundling,
    batchUnbundling,
    bundDialog,
    bundHistory,
    payDialog,
    setAutoShift,
    tabs,
    SelectTree
  },
  data () {
    return {
      loading: false,
      showAddBtn: false,
      shchemeDialog: false,
      isSubmitloading: false,
      schemeName: '',
      tab: 'operate', // 选中的 tab
      show: true, // 树形选择器显示隐藏标识
      isShowPayDialog: false,
      // 车间选项
      locationOptions: [],
      // 工位选项
      stationOptions: [],
      // 设备类型选项
      deviceTypeOptions: [],
      // 部门 tree
      departments: [],
      // 批量解绑数据
      batchUnbund: {
        selected: [],
        type: '',
        show: false
      },
      // 批量绑定数据
      batchBund: {
        selected: [],
        type: '',
        show: false
      },
      voidList: 0, // 非机加工设备数量
      // 绑定历史
      history: {
        selected: [],
        show: false
      },
      // 单人绑定数据
      bund: {
        type: '',
        shiftId: null,
        userId: null,
        deviceId: null,
        deviceName: '',
        shiftName: '',
        show: false
      },
      icCode: '', // ic卡号
      // 查询条件
      queryParams: {
        location: {
          id: null,
          level: null,
          label: '',
          hash: ''
        }, // 车间
        workCenterName: ['all'], // 工位
        deviceType: 'all' // 设备类型
      },
      // 搜索条件
      searchCondition: [
        { id: 'deviceName', name: '设备名称', statId: this.CommonConfig.statData.manMachineBind.searchByMachineName.id },
        { id: 'operatorName', name: '操作员姓名', statId: this.CommonConfig.statData.manMachineBind.searchByOperater.id },
        { id: 'technicianName', name: '技术员姓名', statId: this.CommonConfig.statData.manMachineBind.searchByTechnician.id },
        { id: 'deviceCode', name: '设备编号' }],
      searchBy: '', // 搜索条件 deviceNum or deviceName
      keyword: '', // 搜索值
      // 主表格分页配置
      // pagination: {
      //   // 当前页码
      //   page: 1,
      //   // 每页条数
      //   rowsPerPage: 10,
      //   // 总条数
      //   rowsNumber: 0
      // },
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 初始化表格列数
      tableColumns: [],
      // 表格数据
      tableData: [],
      // 选中列表
      selected: [],
      // 车间名
      selWorkShop: '',
      // 岗位
      postOptions: [],
      // 轮班列表
      shiftsList: [],
      // 设备名称id
      deviceDetail: {},
      // 车间详细map
      workshopDetail: {},
      // 轮班名
      shiftsData: {},
      tabList: [{
        name: 'item.id',
        label: 'item.name'
      }],
      selTab: null,
      treeDataOrigin: null
    }
  },
  computed: {
    workshop () {
      if (this.queryParams.location.hash) {
        return this.queryParams.location.hash.split('/')[0]
      }
      return ''
    }
  },
  methods: {
    showShchemeDialog () {
      this.schemeName = ''
      this.shchemeDialog = true
    },
    changeMarkerTab (val) {
      this.$utils.showMessage('icontubiao-28', '确认要手动切换至该方案吗？', () => {
        this.$q.loading.show()
        this.$q.loading.hide()
      }, true)
    },
    addScheme () {
      this.isSubmitloading = true
      this.isSubmitloading = false
      this.shchemeDialog = false
      this.schemeName = ''
    },
    deleteScheme (val) {
      console.log(val, 'deleteScheme')
    },
    setAutoShift () {
      this.$refs.setAutoShift.showDialog()
    },
    // 初始化数据
    init () {
      this.getWorkshopList()
      this.getDeviceTypes()
      this.getDepartmentsTree()
      this.getDictList()
    },
    // 全选
    selAll () {
      let selList = []
      this.selected.forEach(item => {
        if (item.deviceType !== 'void') {
          selList.push(item)
        }
      })
      this.selected = selList
    },
    // 添加表头数据
    pushHeaderData (data) {
      let hearerData = [
        { name: 'deviceName', field: 'deviceName', label: '设备', align: 'left' },
        { name: 'workCenterName', field: 'workCenterName', label: '工位', align: 'center' }
      ]
      for (let i in data) {
        let itemData = {
          name: 'turn_' + data[i].id,
          field: 'turn_' + i,
          label: data[i].name,
          align: 'center',
          id: data[i].id
        }
        if (+i === data.length - 1) {
          itemData['shiftsList'] = data
        }
        hearerData.push(itemData)
      }
      return hearerData
    },
    // 岗位
    getDictList () {
      getDict('post', true).then(data => {
        this.postOptions.push(...data.data)
      })
    },
    // 刷卡绑定
    onPayBind (val) {
      this.isShowPayDialog = true
      val && this.$refs.payDialog.getUserList(val, this.selected, this.workshop)
    },
    onCancelPay (isRefresh = false) {
      this.isShowPayDialog = false
      this.icCode = ''
      this.selected = []
      isRefresh && this.getBindingList()
    },
    // 批量绑定
    batchBinding (type) {
      this.batchBund.show = true
      this.batchBund.type = type
      this.batchBund.selected = this.selected
    },
    // 批量解绑
    batchUntying (type) {
      this.batchUnbund.show = true
      this.batchUnbund.type = type
      this.batchUnbund.selected = this.selected
    },
    // 单人绑定
    singleBinding (type, item, id, shiftId, isReplace) {
      // 判断非机加工设备
      if (item.deviceType !== 'void') {
        this.bund.show = true
        this.bund.type = type
        this.bund.userId = id
        this.bund.shiftId = shiftId
        this.bund.deviceId = item.deviceId
        this.bund.deviceName = item.deviceName
        this.bund.shiftName = this.shiftsData[shiftId]
        this.$refs.bundDialog.initData(isReplace)
      }
    },
    // 绑定历史
    bindingHistory () {
      this.history.show = true
      this.history.selected = this.selected
    },
    // 搜索
    inputSearch (item, searchVal) {
      this.searchBy = item.id
      this.keyword = searchVal
      // this.pagination.page = 1
      this.getBindingList()
    },
    // 清空
    clearSearchVal () {
      this.searchBy = ''
      this.keyword = ''
      this.getBindingList()
    },
    // 重置查询条件
    resetSearch () {
      this.queryParams = {
        workCenterName: ['all'],
        deviceType: 'all'
      }
      this.getTreeData(this.treeDataOrigin)
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val) {
      this.pagination.rowsPerPage = val
      this.getBindingList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      this.getBindingList()
    },
    // 获取车间列表
    getWorkshopList () {
      // 获取组织机构树
      getOrganize().then(res => {
        this.treeDataOrigin = res.data
        this.getTreeData(res.data)
        this.searchList()
      })
    },
    getTreeData (data) {
      // 去除 default 节点
      let clearTree = defaultSchemesClearer.clear(data)

      const reorganize = (node) => {
        // 为节点添加唯一键，用于 tree 组件标识唯一节点
        node.uniqueKey = node.level + ':' + node.id
        this.workshopDetail[node.uniqueKey] = node.label
        if (node.children instanceof Array) {
          node.children.forEach(reorganize)
        }
      }
      // 重新组织 tree
      clearTree.forEach(reorganize)

      this.locationOptions = clearTree
      this.queryParams.location = Object.assign({}, clearTree[0])

      this.$refs.selectTree.setValue(this.queryParams.location)

      this._changeTreeNode(this.queryParams.location)
    },
    // 根据条件搜索
    searchList () {
      this.tableData = []
      this.pagination.page = 1
      const uniqueKey = this.queryParams.location.level + ':' + this.queryParams.location.id
      this.selWorkShop = this.workshopDetail[uniqueKey]
      this.getShiftsList()
    },
    // 获取人机绑定列表
    getBindingList () {
      let params = {
        id: this.workshop,
        schemeId: this.queryParams.location.id,
        level: this.queryParams.location.level,
        deviceType: this.queryParams.deviceType === 'all' ? '' : this.queryParams.deviceType,
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        searchBy: this.searchBy,
        keyword: this.keyword
      }
      // deviceIds
      if (this.queryParams.workCenterName[0] === 'all') {
        params.workCenterIds = []
      } else {
        params.workCenterIds = this.queryParams.workCenterName
      }
      this.loading = true
      getBindingList(params).then(res => {
        // 重置表格数据
        this.tableData = []
        this.selected = []
        let voidList = 0
        res.data.forEach(o => {
          let item = {
            ...o.device
          }
          if (o.device.deviceType === 'void') {
            voidList++
          }
          this.deviceDetail[o.device.deviceId] = {
            name: o.device.deviceName,
            id: o.device.assetNumber
          }
          // 绑定列表轮班顺序与轮班列表轮班顺序一一对应
          // 轮班以轮班列表为准
          const shifts = this.tableColumns[this.tableColumns.length - 1]?.shiftsList
          for (let s in shifts) {
            item['turn_' + shifts[s].id] = {}
            const shiftsItem = item['turn_' + shifts[s].id]
            // 技术员/操作员 默认为空
            shiftsItem.operator = {}
            shiftsItem.technician = {}
            shiftsItem.shiftId = shifts[s].id
            shiftsItem.shiftName = shifts[s].name
            if (item.shifts.length > 0) {
              for (let i in item.shifts) {
                if (shifts[s].id === item.shifts[i].shiftsId) {
                  // 判断绑定列表轮班中是否有操作员/技术员
                  if (item.shifts[i].operatorId) {
                    shiftsItem.operator = {
                      id: item.shifts[i].operatorId,
                      name: item.shifts[i].operatorName
                    }
                    // item.shiftId = item.shifts[i].shiftsId
                    // item.shiftName = item.shifts[i].name
                  }
                  if (item.shifts[i].technicianId) {
                    shiftsItem.technician = {
                      id: item.shifts[i].technicianId,
                      name: item.shifts[i].technicianName
                    }
                    // item.shiftId = item.shifts[i].shiftsId
                    // item.shiftName = item.shifts[i].name
                  }
                }
              }
            }
          }
          this.tableData.push(item)
          this.voidList = voidList
          this.pagination.rowsNumber = res.data.total
        })
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取轮班列表
    getShiftsList () {
      if (!this.workshop) {
        this.$message.warning('请选择所在位置')
        return
      }
      const params = {
        id: this.workshop
      }
      this.tableColumns = []
      this.shiftsData = {}
      getShiftsList(params).then(res => {
        if (res.data && res.data.length > 0) {
          this.shiftsList = [{
            value: 'all',
            label: '全部'
          }]
          res.data.forEach(o => {
            this.shiftsData[o.id] = o.name
            this.shiftsList.push({
              value: o.id,
              label: o.name
            })
          })
          this.tableColumns = this.pushHeaderData(res.data)
          this.getBindingList()
        } else {
          this.$message.warning('当前车间下无启用班制')
        }
      })
    },
    // 获取设备类型
    getDeviceTypes () {
      getDeviceTypes().then(res => {
        if (res.data.length > 0) {
          this.deviceTypeOptions.push(...res.data)
        } else {
          this.deviceTypeOptions = []
          this.queryParams.deviceType = ''
        }
      })
    },
    /**
     * 获取部门 tree
     */
    getDepartmentsTree: function () {
      userManageApi.getDepartmentsTree()
        .then(data => {
          this.departments = data
        })
    },
    // 选择组织机构树节点 *
    _changeTreeNode: function (val) {
      if (val.id && val.label && val.hash) {
        this.queryParams.location.id = val.id
        this.queryParams.location.level = val.level
        this.queryParams.location.label = val.label
        this.queryParams.location.hash = val.hash
        this.queryParams.workCenterName = ['all']
        this.listStationOptions(val.id, val.level)
      } else {
        this.selectFirstLocation()
        this.queryParams.workCenterName = ['all']
        this.stationOptions = []
      }
    },
    // 选中第一个组织
    selectFirstLocation () {
      if (this.locationOptions.length === 0) {
        return
      }

      const first = this.locationOptions[0]
      this.queryParams.location.id = first.id
      this.queryParams.location.level = first.level
      this.queryParams.location.label = first.label
      this.queryParams.location.hash = first.hash
      this.$refs.selectTree.setValue(this.queryParams.location)

      this.listStationOptions(first.id, first.level)
    },
    // 列举工位选项
    listStationOptions (schemeId, schemeLevel) {
      const options = []
      getStation(schemeLevel, schemeId).then(res => {
        for (const station of res.data.list) {
          options.push({
            value: station.id,
            label: station.opdesc
          })
        }
      })

      this.stationOptions = options
    }
  },
  created () {
    this.init()
  }
}
</script>

<style scoped lang="stylus">
  .no-workshop{
    margin auto
    .add-btn{
      width 140px
      height 140px
      border-radius 6px
      border 1px dashed #d3d3d3
      font-size 16px
      text-align center
      color #999
      &:hover{
        border-color $primary
        color $primary
        background-color rgba(95, 119, 253, 0.17)
        transition all ease-in .2s
      }
    }
  }
  .font-size-16 {
    font-size 16px
  }
  .font-size-14 {
    font-size 14px
  }
  .page-content{
    padding 20px
  }
  .select{
    margin-right 20px
    margin-bottom 20px
  }
  .content-h{
    height calc(100% - 36px)
    /*overflow hidden !important*/
  }
  .content-h>.q-panel{
    height 100%
  }
  .content-h>.q-panel>.q-tab-panel{
    height 100%
    display: flex;
    flex-direction: column;
  }
  .content-h.page-content{
    /*padding 0 0 42px*/
    padding 0
  }
  .myTable .item{
    min-width 240px
    display flex
    /*padding: 13px 16px;*/
  }
  .myTable td .item:first-child{
    border-bottom  #D3D3D3 1px solid
  }
  .bor-b{
    border-bottom #D3D3D3 1px solid
  }
  .myTable tr:last-child .bor-b{
    border-bottom none
  }
  .myTable td,.myTable th{
    border-right #D3D3D3 1px solid
  }
 /* .myTable td:first-child,.myTable th:first-child{
    border-right transparent
    padding-right 0
  }*/
  .myTable td:last-child,.myTable th:last-child{
     border-right transparent
   }
  .bind{
    color $primary
    cursor pointer
  }
  .unbind{
    color $warning
    cursor pointer
  }
  .disable-btn{
    color #999
    cursor no-drop
  }
  @media (max-width $breakpoint-md-max) {
    .myTable .item {
      padding  ($td-md-height / 2) - 12 16px
    }
  }
  @media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max){
    .myTable .item {
      padding  ($td-md-height / 2) - 12 16px
    }
  }
  @media (min-width $breakpoint-xl-min){
    .myTable .item {
      padding  ($td-md-height / 2) - 12 16px
    }
  }
</style>
